<template>
	<view class="old-diy-nav home-nav component-diy" :class="componentData.layout" :style="marginStyle">
		<view class="box" v-if="!reset" :style="boxStyle">
			<view class='home-nav-list' :style="listStyle" v-for='(item, index) in componentData.fileList' :key='index' @click="toUrl(item.page.url)">
				<view class="con" :style="conStyle">
					<view class="img-box">
						<image :src="item.imageUrl" class="img" mode="widthFix"
							:style="{width: item.imageWidth ? item.imageWidth + 'px' : '100%','border-radius':componentData.chRadius+'%'}">
					</view>
				</view>
				<text class="text" :style="textStyle" v-if="item.title&&componentData.showText!==false">{{item.title}}</text>
			</view>
			<!-- #ifdef H5 -->
			<div v-if="!componentData.fileList || componentData.fileList.length == 0" class="noSetting">
				图文导航组件参数未设置
			</div>
			<!-- #endif -->
		</view>
	</view>
</template>

<script>
	export default {
		props: ['componentData'],
		data() {
			return {
				reset: false,
			};
		},
		computed: {
			marginStyle() {
				let css = {
					'margin': '5px 15px',
					'padding': 0,
					'margin-top': this.componentData.marginTop + 'px',
					'margin-bottom': this.componentData.marginBottom + 'px',
					'margin-left': this.componentData.marginLR + 'px',
					'margin-right': this.componentData.marginLR + 'px',
				}
				return this.$joinStyle(css);
			},
			boxStyle() {
				let css = {
					'background-color': this.componentData.backgroundColor,
					'border-radius': this.componentData.borderRadius + 'px',
					'padding': this.componentData.paddingTRBL + 'px 0',
					'margin': '0 ' + this.componentData.paddingTRBL + 'px',
				}
				return this.$joinStyle(css);
			},
			listStyle() {
				let css = {
					'margin-top': this.componentData.marginChTB + 'px',
					'margin-bottom': this.componentData.marginChTB + 'px',
				}
				return this.$joinStyle(css);
			},
			conStyle() {
				let css = {
					'margin-left': this.componentData.marginChLR + 'px',
					'margin-right': this.componentData.marginChLR + 'px',
					'width': `calc(100% - ${this.componentData.marginChLR*2}px)`,
				}
				return this.$joinStyle(css);
			},
			textStyle() {
				let css = {
					'color': this.componentData.textColor,
					'line-height': '12px',
				}
				if (this.componentData.textMarginT) {
					css['margin-top'] = this.componentData.textMarginT + 'px';
				}
				if (this.componentData.textMarginB) {
					css['margin-bottom'] = this.componentData.textMarginB + 'px';
				}
				return this.$joinStyle(css);
			}
		},
		watch: {
			'componentData.layout'(n) {
				this.reset = true;
				this.$nextTick(() => {
					this.reset = false;
				});
			},
			componentData: {
				deep: true,
				immediate: true,
				handler(n, o) {
					let options = {
						marginTop: 5,
						marginBottom: 5,
						marginLR: 15,
						paddingTRBL: 5,
						backgroundColor: 'rgba(255,255,255,1)',
						borderRadius: 6,
						marginChTB: 0,
						chRadius: 0,
						showText: true,
						textMarginT: 8,
						textMarginB: 8,
						marginChLR: 0,
						textColor: '#333333',
					}
					for (let key in options) {
						if (!(key in this.componentData)) {
							this.componentData[key] = options[key];
						}
					}
					if (o && n.marginChLR != o.marginChLR) {
						this.reset = true;
						this.$nextTick(() => {
							this.reset = false;
						});
					}
				}
			}
		},
		mounted() {
			//临时处理旧客户的DIY默认变量 过几个版本后记得删除

		},
		methods: {
			toUrl(url) {
				if (url) {
					uni.navigateTo({
						url: url
					})
				}
			}
		},
	}
</script>

<style lang="less">
	.old-diy-nav.home-nav {
		box-sizing: border-box;

		.box {
			background-color: white;
			box-sizing: border-box;
			flex-wrap: wrap;
			display: flex;
			border-radius: 5px;
		}

		.con {
			width: 100%;
			font-size: 0;
			box-sizing: border-box;

			.img-box {
				width: 100%;
				height: auto;
				font-size: 0;
				// padding-bottom: 100%;
			}
		}

		.home-nav-list {
			position: relative;
			width: 20%;
			height: auto;
			box-sizing: border-box;

			.text {
				font-size: 12px;
			}
		}

		&.one-per-line {
			.home-nav-list {
				width: 100%;
			}
		}

		&.two-per-line {
			.home-nav-list {
				width: 50%;
			}
		}

		&.three-per-line {
			.home-nav-list {
				width: 33.3%;
				// padding-bot
			}
		}

		&.four-per-line {
			.home-nav-list {
				width: 25%;
			}
		}
	}

	.home-nav-list {
		width: 20%;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
	}

	.home-nav-list .img {
		max-width: 100%;
	}

	.home-nav-list .text {
		font-size: 12px;
		width: 100%;
		height: 13px;
		white-space: nowrap;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		line-height: 13px;
	}

	.noSetting {
		width: 100%;
		height: 100px;
		background-color: #d9d9d9;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 22px;
		color: #333;
	}
</style>
